不定更新、可能爛尾XD

學習資源: W3Schools、其他網路資料

在前面的微筆記中，有使用到<line></line>來繪製線段，雖然還沒寫SVG Path的內容，但Path其實也能拿來繪製線段喔! 在本篇微筆記會使用到非常簡單的Path來繪製線段，並介紹幾種線段的特性(Stroke Property)。

SVG : 線段

(僅列出部分有使用到的屬性)

• <svg></svg>

  • height : 整個圖形(畫布)的原始長度
  • width: 整個圖形(畫布)的原始寬度

• <g></g>

  • 主要的作用是群組化，可以設定共通屬性

• <path></path> 或 <path />

  • d : 路徑(path)會經過的點(x,y)
  • stroke : 線段顏色
  • stroke-width : 線段的寬度
  • stroke-linecap : 線段頭尾的形式
  • stroke-dasharray : 用來建立虛線的間隔陣列
  • stroke-opacity : 線段顏色的透明度

範例1 - 線段顏色

Path可以做的操作蠻多也挺複雜的~

• d放的是path會經過的點，還有關於這些點的操作
  • M : 移動路徑初始點
  • L : 將初始點連線(Line To)到某一點
  • Z : 關閉路徑

<svg height="300" width="400">
    <g>
        <path stroke="red" d="M20 30 L200 30Z"></path>
        <path stroke="green" d="M20 50 L200 50Z"></path>
        <path stroke="blue" d="M20 70 L200 70Z"></path>
    </g>
</svg>

範例2 - 線段寬度

可以利用<g></g>把線段群組化並設定共通屬性，像下面就把所有線段都設為黑色。

<svg height="300" width="400">
    <g stroke="black">
        <path stroke-width="2" d="M20 30 L200 30Z"></path>
        <path stroke-width="4" d="M20 50 L200 50Z"></path>
        <path stroke-width="6" d="M20 70 L200 70Z"></path>
    </g>
</svg>

範例3 - 線段頭尾形式

除了round可以很容易看出效果，其他兩種效果都看不太出來。
這邊還要注意不能用Z關閉路徑，不然stroke-linecap會無法產生效果。

<svg height="300" width="400">
    <g stroke="black" stroke-width="6">
        <path stroke-linecap="butt" d="M20 30 L200 30"/>
        <path stroke-linecap="round" d="M20 50 L200 50"/>
        <path stroke-linecap="square" d="M20 70 L200 70"/>
    </g>
</svg>

範例4 - 線段的虛線形式

透過stroke-dasharray可以規範虛線段的間隔(1實線1空白)。
舉 stroke-dasharray="5,10,5,10" 為例，實線是5單位而空白是10單位，以5實5空5實5空不斷做循環。

<svg height="300" width="400">
    <g stroke="black" stroke-width="6">
        <path stroke-dasharray="10,10" d="M20 30 L200 30"/>
        <path stroke-dasharray="5,10,5,10" d="M20 50 L200 50"/>
        <path stroke-dasharray="5,10,20,10" d="M20 70 L200 70"/>
    </g>
</svg>

參考資料

SVG Stroke Properties - W3Schools